{% extends 'common/userpublic.html' %}
{% load static %}

{% block head %}
    <script src="{% static 'js/jquery-1.10.2.min.js' %}"></script>
    <script src="{% static 'js/popup.mini.js' %}"></script>
{% endblock %}

{% block header %}
    个人中心
{% endblock %}

{% block body %}
    <div style="height: 49px;"></div>
    <div class="member">
        <div class="mem-tit" ><i id="phone">{{ phone }}</i>
            <a href="" class="step"><img src="{% static 'images/step.png' %}" width="26"/></a>
        </div>
        <div class="mem-pic">
            <div class="mem-pic-bg" style="background-image: url({{ MEDIA_URL }}{{ user.head }});"></div>
        </div>
        <ul class="member-menu">
            <li>
                <a href="">
                    <p class="yellow">0</p>
                    <p class="black">帐户余额 </p>
                </a>
            </li>
            <li>
                <a href="">
                    <p class="yellow">0</p>
                    <p class="black">积分 </p>
                </a>
            </li>
            <li>
                <a href="">
                    <p class="yellow">0</p>
                    <p class="black">优惠劵 </p>
                </a>
            </li>
            <li>
                <a href="">
                    <p class="yellow">0</p>
                    <p class="black">我的收藏 </p>
                </a>
            </li>
        </ul>
    </div>
    <div class="user-list">
        <div class="u-list-main">
            <img src="{% static 'images/order-pic.png' %}" width="27"/>
            <span>我的购物订单</span>
            <a href="">查看全部订单></a>
        </div>
        <ul class="user-nav">
            <li><a href=""> <img src="{% static 'images/1-icon.png' %}">
                <p>待付款</p></a></li>
            <li><a href=""> <img src="{% static 'images/1-icon1.png' %}">
                <p>待收货</p></a></li>
            <li><a href=""> <img src="{% static 'images/1-icon2.png' %}">
                <p>待评价</p></a></li>
            <li><a href=""> <img src="{% static 'images/1-icon3.png' %}">
                <p>退换货</p></a></li>
        </ul>
        <div class="u-list-main">
            <img src="{% static 'images/order-my.png' %}" width="27"/>
            <span>帐户与安全</span>
        </div>
        <ul class="user-nav">
            <li><a href="{% url 'user:个人信息' %}"> <img src="{% static 'images/1-icon4.png' %}">
                <p>个人资料</p></a></li>
            <li><a href="{% url 'user:收货地址' %}"> <img src="{% static 'images/1-icon5.png' %}">
                <p>收货地址</p></a></li>
            <li><a href="{% url 'user:安全设置' %}"> <img src="{% static 'images/1-icon6.png' %}">
                <p>安全设置</p></a></li>
            <li><a href=""> <img src="{% static 'images/1-icon7.png' %}">
                <p>我的钱包</p></a></li>
        </ul>
    </div>
    <!--导航-->
    <ul class="sq-nav"
        style=" background: #fff; margin-top: 1rem; border-top: 1px solid #ddd;  border-bottom: 1px solid #ddd;">
        <li>
            <div class="am-gallery-item">
                <a href="" class="">
                    <img src="{% static 'images/m_03.png' %}"/>
                    <p>我要兼职</p>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="" class="">
                    <img src="{% static 'images/m_04.png' %}"/>
                    <p>推荐有奖</p>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="" class="">
                    <img src="{% static 'images/m_05.png' %}"/>
                    <p>我的推荐</p>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="" class="">
                    <img src="{% static 'images/m_06.png' %}"/>
                    <p>我的佣金</p>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="" class="">
                    <img src="{% static 'images/m_02.png' %}"/>
                    <p>我的红包</p>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="" class="">
                    <img src="{% static 'images/m_07.png' %}"/>
                    <p>我的动态</p>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="" class="index-qd">
                    <img src="{% static 'images/m_08.png' %}"/>
                    <p>客服中心</p>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="{% url 'user:登录' %}" class="">
                    <img src="{% static 'images/m_09.png' %}"/>
                    <p>安全退出</p>
                </a>
            </div>
        </li>
    </ul>
    </div>
    <!--客服中心-->
    <div class="qd-box">
        <div class="popup-title">
            <span>客服中心</span>
            <div class="popup-close"><i class="iconfont">&#xe602</i></div>
        </div>
        <div class="dq-text">
            <a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes">
                <img src="{% static 'images/contactqq.png' %}" width="50"/>
                <p class="contactqq">联系QQ</p>
            </a>
            <a href="tel:0791-12345678">
                <img src="{% static 'images/contacttele.png' %}" width="50"/>
                <p class="contacttele">呼叫电话</p>
            </a>
        </div>
    </div>
    <!--客服中心-->
    <!--底部-->
    <div style="height: 55px;"></div>
    <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default sq-foot am-no-layout" id="">
        <ul class="am-navbar-nav am-cf am-avg-sm-5">
            <li>
                <a href="{% url 'goods:超市主页' %}" class="">
                    <span class="am-icon-home"></span>
                    <span class="am-navbar-label">首页</span>
                </a>
            </li>
            <li>
                <a href="" class="">
                    <span class="am-icon-comments"></span>
                    <span class="am-navbar-label">动态</span>
                </a>
            </li>
            <li>
                <a href="{% url 'shopcart:购物车' %}" class="">
                    <span class="am-icon-shopping-cart"></span>
                    <span class="am-navbar-label">购物车</span>
                </a>
            </li>
            <li>
                <a href="" class="">
                    <span class="am-icon-file-text"></span>
                    <span class="am-navbar-label">订单</span>
                </a>
            </li>

            <li>
                <a href="{% url 'user:个人中心' %}" class="curr">
                    <span class="am-icon-user"></span>
                    <span class="am-navbar-label">我的</span>
                </a>
            </li>
        </ul>
    </div>
{% endblock %}

{% block foot %}
    <script type='text/javascript'>
        var phone = $('#phone').text();
        var newphone = '';
        if (phone.length > 0) {
            for (var i = 0; i < phone.length; i++) {
                if (i < 3 || i >= phone.length - 4) {
                    newphone += phone[i];
                } else {
                    newphone += '*';
                }
            }
        }
        $('#phone').text(newphone);

        (function () {
            new PopUp_api({el: '.index-qd', html: '.qd-box'});
        })()
    </script>

    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/amazeui.min.js' %}"></script>
{% endblock %}

